<template>
  <!-- 浮动侧边栏容器 -->
  <div
      class="sidebar-container"
      :class="{'collapsed': isCollapsed}"
      :style="{
      width: isCollapsed ? '3vw' : '10vw',
    }"
  >
    <!-- 垂直居中的伸缩按钮 -->
    <div class="toggle-button" @click="toggleSidebar">
      <el-icon :size="24">
        <component :is="isCollapsed ? Expand : Fold" />
      </el-icon>
    </div>

    <!-- 菜单组件 -->
    <el-menu
        :default-active="activeKey"
        class="el-menu-vertical-demo"
        background-color="var(--sidebar-bg)"
        text-color="var(--sidebar-text)"
        active-text-color="var(--sidebar-active)"
        :collapse="isCollapsed"
        :collapse-transition="false"
        router
    >
      <el-sub-menu index="/overview">
        <template #title>
          <el-icon><HomeFilled /></el-icon>
          <span>全局总览</span>
        </template>
        <el-menu-item index="/overview/home">总览</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="/health">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>健康状态与寿命</span>
        </template>
        <el-menu-item index="/health/list">健康状态列表</el-menu-item>
        <el-menu-item index="/health/detail">寿命预测详情</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="/diagnose">
        <template #title>
          <el-icon><DataAnalysis /></el-icon>
          <span>故障诊断</span>
        </template>
        <el-menu-item index="/diagnose/warning">实时报警</el-menu-item>
        <el-menu-item index="/diagnose/diagnose">故障诊断</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="/task">
        <template #title>
          <el-icon><Search /></el-icon>
          <span>任务智能下发</span>
        </template>
        <el-menu-item index="/task/list">任务管理列表</el-menu-item>
        <el-menu-item index="/task/newtask">新建任务</el-menu-item>
        <el-menu-item index="/task/result">任务车辆匹配结果</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/3d-visualization">
        <template #title>
          <el-icon><View /></el-icon>
          <span>三维可视化</span>
        </template>
        <el-menu-item index="/3d-visualization/model-library">三维模型库</el-menu-item>
        <el-menu-item index="/3d-visualization/vehicle">单车三维可视化</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="/algorithm-management">
        <template #title>
          <el-icon><DataLine /></el-icon>
          <span>算法库管理</span>
        </template>
        <el-menu-item index="/algorithm-management/model-list">算法模型列表</el-menu-item>
        <el-menu-item index="/algorithm-management/training-deploy">模型训练与部署</el-menu-item>
        <el-menu-item index="/algorithm-management/rule-engine">规则引擎管理</el-menu-item>
        <el-menu-item index="/algorithm-management/knowledge-base">RAG知识库管理</el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="/report-center">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>报表中心</span>
        </template>
        <el-menu-item index="/report-center/generation">报表生成</el-menu-item>
        <el-menu-item index="/report-center/viewing">报表查看</el-menu-item>
      </el-sub-menu>


    </el-menu>
  </div>
</template>

<script>
import {
  HomeFilled,
  Setting,
  DataAnalysis,
  Search,
  DataLine,
  Monitor,
  MagicStick, Expand, Fold, Document
} from '@element-plus/icons-vue'
import {ElIcon, ElMenu, ElMenuItem, ElSubMenu} from "element-plus";
import '/src/assets/styles/sidebar.css';
import '/src/assets/styles/global.css';
export default {
  computed: {
    Fold() {
      return Fold
    },
    Expand() {
      return Expand
    }
  },
  components: {
    Document,
    HomeFilled,
    Setting,
    DataAnalysis,
    Search,
    DataLine,
    Monitor,
    MagicStick,
    ElMenu,
    ElMenuItem,
    ElIcon,
    ElSubMenu,  // 添加子菜单组件
    Expand,
    Fold
  },
  data() {
    return {
      activeKey: '',
      isCollapsed: false, // 控制侧边栏伸缩状态
      sidebarWidth: '18vw' // 初始宽度
    }
  },
  mounted() {
    this.updateActiveKey()
    // 添加响应式处理
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    updateActiveKey() {
      // 直接使用当前路由路径
      this.activeKey = this.$route.path;
    },
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed;
    },
    handleResize() {
      // 移动设备下自动折叠
      if (window.innerWidth <= 768) {
        this.sidebarWidth = '70vw';
        if (!this.isCollapsed) this.isCollapsed = true;
      } else {
        this.sidebarWidth = '18vw';
      }
    }
  },
  watch: {
    '$route'(to) {
      this.updateActiveKey()
    }
  }
}
</script>